import React from 'react';

let i: any = []; // 全局变量解决闭包陷阱
let index = 0; // 当前遍历项
export function LonglistCutRenderer(props) {
  // 获取需要的属性
  const { children, speed = 1 } = props;
  if (speed <= 0) {
    throw Error('speed必须为正整数');
  }
  // 使用renderList保存获取过来的fiber节点列表
  const [renderList, setRenderList] = React.useState([]);

  // 监视renderList  当前index小于列表长度  执行渲染
  React.useEffect(() => {
    if (index < children.length) {
      addListPart();
    }
  }, [renderList]);

  //TODO 使用requestAnimationFrame配合useEffect进行切片
  const addListPart = () => {
    requestAnimationFrame(() => {
      // 定义列表片段
      const listPart = children.slice(index, index + speed);
      console.log(listPart);
      // 使用外部变量解决闭包陷阱(每次推入一个列表片段)
      i = [...i, ...listPart];
      index += speed;
      setRenderList(i);
    });
  };

  // 通过children获取的list数组 每一个都是一个fiber节点  可以直接在jsx里渲染
  // map遍历renderList,将fiber节点数组的对应下标项渲染到Fragment中
  return (
    <React.Fragment>
      {renderList.map((item, index) => children[index])}
    </React.Fragment>
  );
}
